{extend name="common/common" /}

{block name="style"}
<style media="screen">
	.layui-unselect.layui-form-switch{
		padding: 2px 25px;
	}
	.layui-form-onswitch i {
    	left: 34px;
    	top: 2px;
	}
	.layui-form-onswitch{
		border-color: #ed5565;
    	background-color: #ed5565;
	}
</style>
{/block}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
	<div class="ibox float-e-margins">
		<div class="ibox-title">
			<h5>设置学籍变动原因</h5>
		</div>
		<div class="ibox-content">
			<!-- start of btn -->
			<div class="container-fluid">
				<div class="container-fluid">
					{if authCheck('education/addrollstatus')}
					<a class="btn btn-primary" href="javascript:addRollStatus();">添加变动原因</a>
					{/if}
				</div>
			</div>
			<!-- end of btn -->

			<!-- start of table -->
			<table class="table table-striped table-hover text-center">
				<thead>
					<tr>
						<th class="text-center">#</th>
						<th class="text-center">名称</th>
						<th class="text-center">是否为异常</th>
						<th class="text-center">操作</th>
					</tr>
				</thead>
				<tbody>
					{volist name="rollStatus" id="v"}
					<tr>
						<td>{$v.id}</td>
						<td>{$v.name}</td>
						{if authCheck('education/editrollstatus')}
						<td>
							<form class="layui-form" action="">
								{if $v.is_abnormal eq 0}
									<input type="checkbox" data-param="{$v.id}" lay-filter="abnormalCheck" lay-skin="switch" lay-text="是|否">
								{else}
									<input type="checkbox" data-param="{$v.id}" lay-filter="abnormalCheck" lay-skin="switch" lay-text="是|否" checked>
								{/if}
							</form>
						</td>
						{/if}
						{if authCheck('education/delrollstatus') || authCheck('education/editrollstatus')}
						<td>
							{if authCheck('education/delrollstatus')}
							<a href="javascript:delRollStatus({$v.id});" class="btn btn-sm btn-danger"><i class="fa fa-trash"></i></a>
							{/if}
							{if authCheck('education/editrollstatus')}
							<a href="javascript:editRollStatus({$v.id},{$v.is_abnormal},'{$v.name}');" class="btn btn-sm btn-success"><i class="fa fa-edit"></i></a>
							{/if}
						</td>
						{/if}
					</tr>
					{/volist}
				</tbody>
			</table>
			<!-- end of table -->
		</div>
		<!-- end of ibox-content -->
	</div>
	<!-- end of ibox -->
</div>
<!-- start of 编辑 -->
<div class="editBox" style="display:none;padding:15px;">
	<form class="layui-form" action="" id="editForm">
		<div class="layui-form-item">
			<label class="layui-form-label label-required">名称</label>
			<div class="layui-inline">
				<input type="text" name="name" placeholder="请输入名称" class="layui-input" id="e_name">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label label-required">异常</label>
			<div class="layui-inline">
				<input type="checkbox" name="is_abnormal" id="e_switch" lay-skin="switch" lay-text="是|否">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"></label>
			<div class="layui-inline">
				<input type="hidden" name="id" id="e_id">
				<button class="btn btn-primary" type="submit">保存</button>
				<button class="btn btn-danger cancel" type="button">取消</button>
			</div>
		</div>
	</form>
</div>
<!-- end of 编辑 -->

<!-- start of 添加 -->
<div class="addBox" style="display:none;padding:15px;">
	<form class="layui-form" action="" id="addForm">
		<div class="layui-form-item">
			<label class="layui-form-label label-required">名称</label>
			<div class="layui-inline">
				<input type="text" name="name" placeholder="请输入名称" class="layui-input" id="a_name">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label label-required">异常</label>
			<div class="layui-inline">
				<input type="checkbox" name="is_abnormal" id="a_switch" lay-skin="switch" lay-text="是|否">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"></label>
			<div class="layui-inline">
				<button class="btn btn-primary" type="submit">保存</button>
				<button class="btn btn-danger cancel" type="button">取消</button>
			</div>
		</div>
	</form>
</div>
<!-- end of 添加 -->
{/block}

{block name="script"}
<script type="text/javascript">
layui.use('form', function(){
	var form = layui.form;
	// 开关(是否异常)
	form.on('switch(abnormalCheck)', function(data){
		var id = $(this).attr("data-param");
		var abnormal = 1;
		this.checked == true ? abnormal = 1 : abnormal = 0;
		$.post('./editRollStatus',{id:id,is_abnormal:abnormal},function(res){
			if(res.code == 1){
				layer.msg(res.msg,{time:700},function(){
					window.location.reload();
				});
			}else{
				layer.msg(res.msg,{time:700,anim:6});
			}
		});
	});
});
// 删除
function delRollStatus(id){
	layer.confirm('确认删除?删除后不可恢复！', {icon: 3,title: '提示'}, function(index) {
		$.post('./delRollStatus', {id: id}, function(res) {
			if (res.code == 1) {
				layer.alert(res.msg, {title: '友情提示',icon: 1,closeBtn: 0}, function(){
					layer.closeAll();
					window.location.reload();
				});
			} else {
				layer.msg(res.msg, {anim: 6});
			}
		});
	});
}
// 编辑
function editRollStatus(id,is_abnormal,name){
	$("#e_id").val(id);
	$("#e_name").val(name);
	var e_switch = document.getElementById('e_switch');
	is_abnormal == 1 ? e_switch.checked = true : e_switch.checked = false;
	layui.use('form', function(){
		var form = layui.form;
		form.render();
	});
	layer.open({
		type: 1,
		title: "编辑学籍变动原因",
		area: ['350px', '250px'],
		content: $(".editBox"),
	})
}

// 添加
function addRollStatus(){
	layer.open({
		type: 1,
		title: "添加学籍变动原因",
		area: ['350px', '250px'],
		content: $(".addBox"),
	})
}
$(function(){
	$("#editForm").on('submit',function(){
		var e_switch = document.getElementById('e_switch');
		e_switch.checked == true ? is_abnormal = 1 : is_abnormal = 0;
		var param={'is_abnormal':is_abnormal,'name':$("#e_name").val(),'id':$("#e_id").val()}
		$.post('./editRollStatus',param,function(res){
			if (res.code == 1) {
				layer.alert(res.msg, {title: '友情提示',icon: 1,closeBtn: 0}, function(){
					layer.closeAll();
					window.location.reload();
				});
			} else {
				layer.msg(res.msg, {anim: 6});
			}
		});
		return false;
	});

	$("#addForm").on('submit',function(){
		var a_switch = document.getElementById('a_switch');
		a_switch.checked == true ? is_abnormal = 1 : is_abnormal = 0;
		var param={'is_abnormal':is_abnormal,'name':$("#a_name").val()}
		$.post('./addRollStatus',param,function(res){
			if (res.code == 1) {
				layer.alert(res.msg, {title: '友情提示',icon: 1,closeBtn: 0}, function(){
					layer.closeAll();
					window.location.reload();
				});
			} else {
				layer.msg(res.msg, {anim: 6});
			}
		});
		return false;
	});

	$(".cancel").on('click',function(){
		layer.closeAll();
	})
})
</script>
{/block}
